<template>
	<view>
		<view class="fixed" @touchmove.stop.prevent="()=>{}">
			<!-- 状态栏 -->
			<view class="statusBar" :style="'height:'+statusBarHeight+'px'"></view>
			<view class="myheader padding-sm flex justify-between">
				<view class="font-sub-title">
					<text class="cuIcon-back margin-right-ssm" @click="back()"></text>
					添加围栏
				</view>
				<view>
				<text class="font-sub-title uni-bold cuIcon-delete margin-right" v-if="!isAdd" @tap="del"></text>
				<text class="font-sub-title uni-bold cuIcon-check" @tap="save()"></text>
				</view>
			</view>
		</view>
		<view :style="{marginTop:navHeight}">
			<view class="tool_box padding-sm font-normal" @touchmove.stop.prevent="()=>{}">
				<view class="cu-list menu sm-border">
					<view class="cu-item item">
						<view class="content">
							<view>
							<text class="font-normal">地址：{{address}}</text>
							</view>
						</view>
					</view>
					<view class="cu-item item">
						<view class="content flex">
							<view>
								<text class="font-normal">半径(米)：</text>
							</view>
							<slider class="slider" :value="circles[0].radius" @change="sliderChange" min="100" max="5000" show-value />
						</view>
					</view>
				</view>
			</view>
			<map id="myMap" :circles="circles" :latitude="latitude" :longitude="longitude" :markers="markers" class="map" ref="map" :style="{height:mapHeight}" @regionchange="change()"></map>
		</view>
		
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	var that;
	export default {
		computed:{
			...mapGetters(['navHeight','statusBar']),
		},
		data() {
			return {
				modalName:'',
				statusBarHeight:Vue.prototype.StatusBar,
				user:"",
				isAdd:true,
				mapHeight:'',
				appMap:'',
				address:'',
				elecfenceId:'',
				latitude: '',
				longitude: '',
				circles:[{
					latitude: '',
					longitude: '',
					fillColor:'#00000022',
					color:'#00000022',
					radius:'100'
				}],
				count:2,
				markers: [{
					title:'',
					latitude: '',
					longitude: '',
					iconPath: '../../static/img/point.png'
				}]
			}
		},
		onReady() {
			this.appMap = uni.createMapContext("myMap",this);
		},
		onLoad(option){
			that = this;
			this.user = uni.getStorageSync("userInfo")
			if(option.data!=null&&option.data!=''){
				var data = JSON.parse(option.data)
				that.isAdd = false;
				that.latitude = data.LAT
				that.longitude = data.LNG
				that.markers[0].latitude = data.LAT
				that.markers[0].longitude = data.LNG
				that.circles[0].latitude = data.LAT
				that.circles[0].longitude = data.LNG
				that.circles[0].radius = data.RADIUS*1000
				that.address = data.ADDRESS
				that.elecfenceId = data.ELECFENCE_ID
			}else{
				plus.geolocation.getCurrentPosition(function(res){
						that.latitude = res.coords.latitude
						that.longitude = res.coords.longitude
						that.markers[0].latitude = that.latitude
						that.markers[0].longitude = that.longitude
						that.circles[0].latitude = that.latitude
						that.circles[0].longitude = that.longitude
						that.address = res.addresses
					},function(e){
						uni.showToast({
							"title":e.message,
							"position":"bottom",
							"icon":"none"
						})
					}
				)
			}
			
			this.mapHeight = (uni.getSystemInfoSync().windowHeight - this.navHeight.replace('px','')-uni.upx2px('220')) +'px'
		},
		methods: {
			back(){
				uni.navigateBack();
			},
			sliderChange(e){
				that.circles[0].radius = e.detail.value 
				var latitude = that.latitude
				var longitude = that.longitude
				that.latitude = 0
				that.longitude = 0
				that.latitude = latitude
				that.longitude = longitude
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			change(){
				that.count--;
				if(that.count<0){
					this.appMap.getCenterLocation({
						success(res) {
							that.markers[0].latitude = res.latitude
							that.markers[0].longitude = res.longitude
							that.latitude = res.latitude
							that.longitude = res.longitude
							that.circles[0].latitude = res.latitude
							that.circles[0].longitude = res.longitude
							
							var point = new plus.maps.Point(res.longitude, res.latitude);
							plus.maps.Map.reverseGeocode(
								point,
								{},
								function(event) {
									that.address = event.address;
								},function(e){
									uni.showToast({
										"title":e.message,
										"position":"bottom",
										"icon":"none"
									})
								}
							);
							
						}
					})
				}
			},
			del(){
				uni.showModal({
				    title: '温馨提示',
				    content: '您确认删除该条围栏吗？',
				    success: function (res) {
				        if (res.confirm) {
				            that.$http.delElecfence({
								elecfenceId:that.elecfenceId
							}).then((res)=>{
								if(res.code==1){
									uni.showToast({
										"title":"删除成功！",
										"icon":"success"
									})
									setTimeout(function(){
										that.back()
									},1000)
								}else{
									uni.showToast({
										"title":res.message,
										"position":"bottom",
										"icon":"none"
									})
								}
							})
				        }
				    }
				});
			},
			save(){
				if(this.isAdd){
					this.$http.addElecfence({
						lat:String(that.latitude),
						lng:String(that.longitude),
						radius:String(that.circles[0].radius/1000)
					}).then((res)=>{
						if(res.code==1){
							uni.showToast({
								"title":"保存成功！",
								"icon":"success"
							})
							setTimeout(function(){
								uni.navigateBack()
							},1000)
						}else{
							uni.showToast({
								"title":res.message,
								"position":"bottom",
								"icon":"none"
							})
						}
					})
				}else{
					this.$http.editElecfence({
						lat:String(that.latitude),
						lng:String(that.longitude),
						radius:String(that.circles[0].radius/1000),
						elecfenceId:that.elecfenceId
					}).then((res)=>{
						if(res.code==1){
							uni.showToast({
								"title":"编辑成功！",
								"icon":"success"
							})
							setTimeout(function(){
								uni.navigateBack()
							},1000)
						}else{
							uni.showToast({
								"title":res.message,
								"position":"bottom",
								"icon":"none"
							})
						}
					})
				}
			}
		}
	}
</script>

<style>
	.map{
		width: 750rpx;
	}
	.slider{
		width: 430rpx;
	}

</style>
